<template>
  <div class="post-detail-page">
    <modal title="删除文章" :visible="modalIsVisible" @modal-on-close="modalIsVisible = false"
      @modal-on-confirm="hideAndDelete">
      <p>确定要删除这篇文章吗？</p>
    </modal>
    <article class="w-75 mx-auto mb-5 pb-3" v-if="currentPost">
      <img :src="currentImageUrl" alt="currentPost.title" class="rounded-lg img-fluid my-4" v-if="currentImageUrl">
      <h2 class="mb-4">{{ currentPost.title }}</h2>
      <div class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0">
        <div class="col">
          <user-profile :user="currentPost.author" v-if="typeof currentPost.author === 'object'"></user-profile>
        </div>
        <span class="text-muted col text-right font-italic">发表于：{{ currentPost.createdAt }}</span>
      </div>
      <div v-html="currentHTML"></div>
      <div v-if="showEditArea" class="btn-group mt-5">
        <router-link type="button" class="btn btn-success" :to="{ name: 'create', query: { id: currentPost._id } }">
          编辑
        </router-link>
        <!-- <button type="button" class="btn btn-danger" @click.prevent="modalIsVisible = true">删除</button> -->
        <button type="button" class="btn btn-danger" @click.prevent="modalIsVisible = true">删除</button>
      </div>
    </article>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import UserProfile from '../components/UserProfile.vue';
import { marked } from 'marked';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { computed } from '@vue/reactivity';
import { GlobalDataProps, ImageProps, UserInfo, ResponseType, PostProps } from '../store/store';
import Modal from '../components/Modal.vue';
import createMessage from '../components/createMessage';
import router from '../router/router';
const stort = useStore<GlobalDataProps>()
const route = useRoute()
onMounted(() => {
  // 获取文章详细
  stort.dispatch('getPostDetail', {id: route.params.id, column: route.params.column})
})
// 文章
const currentPost = computed(() => {
  return stort.getters.getCurrentPost({id:route.params.id, column: route.params.column})
})
// 文章图片
const currentImageUrl = computed(() => {
  if (currentPost.value && currentPost.value.image) {
    const { image } = currentPost.value
    return (image as ImageProps).url + '?x-oss-process=image/resize,w_850'
  } else {
    return null
  }
})
// // 创建 markdown 实例
// const mk = new MarkDownIt()
// 内容转为 md 格式
const currentHTML = computed(() => {
  // 是HTML格式数据会有isHTML 属性，如果是就不需要转化
  const { content, isHTML } = currentPost.value
  if (currentPost.value && content) {
    // 判断有没有 isHTML 属性
    return isHTML ? content : marked.parse(content)
  }
})
// 权限判断 用户id 是否等与登陆id
const showEditArea = computed(() => {
  const { isLogin, _id } = stort.state.user
  // 如果存在就进去
  if (currentPost.value && currentPost.value.author && isLogin) {
    const postsAuthor = currentPost.value.author as UserInfo
    return postsAuthor._id === _id
    // 如果进不去直接return false
  } else {
    return false
  }
})
// 提示框显示隐藏
const modalIsVisible = ref(false)
const hideAndDelete = () => {
  modalIsVisible.value = false
  stort.dispatch('delPosts', currentPost.value._id).then((data: ResponseType<PostProps>) => {
    createMessage('删除成功，两秒后跳转专栏', 'success', 2000)
    setTimeout(() => {
      router.replace({ name: 'column', params: { id: data.data.column } })
    }, 2000);
  }).catch(err => {
    createMessage(err, 'error', 2000)
  })
}
</script>